<template>
  <div class="flex-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header" >
          <span>工单号：10001</span>
          <div style="text-align: center">
            <h3 style="margin: 5px">Lucky</h3>
            <span style="font-size: small">用户ID:123456789123456789</span>
          </div>
          <el-tag size="large">待处理</el-tag>
        </div>
      </template>
      <div style="width:100%;height:535px">
        <div style="height: 425px">
          <div class="user-box">
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <p class="chat_user">这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大这个问题有点大</p>
          </div>
          <div class="gm-box">
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <p class="chat_gm">爱用不用滚</p>
          </div>
        </div>
        <el-divider />
        <div style="height: 100px">
          <el-form :model="form" >
            <el-form-item>
              <el-input class="inputDeep" v-model="form.name" type="textarea" />
            </el-form-item>
            <el-form-item style="display: flex;">
              <el-button type="primary" @click="onSubmit" style="margin-left: auto">发送</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: '',
})
</script >

<style scoped>
.el-card /deep/ .el-card__header {
  padding: 8px;
}

.el-divider--horizontal{
  margin: 5px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  height: 640px;
  min-width: 480px;
  width: 50%;
}

.inputDeep>>>.el-textarea__inner {
  border: 0;
  resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.chat_user {
  background-color: rgb(229,229,229);color: black;padding: 8px;border-radius: 5px;margin: 0 8px
}

.chat_gm {
  background-color: #409EFF;color: white;padding: 8px;border-radius: 5px;margin: 0 8px
}

.user-box {
  display:flex;flex-direction: row;margin: 5px 0;
}
.gm-box {
  display:flex;flex-direction: row-reverse;margin: 5px 0;
}
</style>
